<template>
  <div class="app-wrapper">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :active-text-color="variables.menuActiveText"
        :unique-opened="false"
        :default-active="activeMenu"
        :collapse-transition="false"
        :collapse="isCollapse"
      >
        <sidebar-item
          v-for="route in routes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex"
import { computed, defineComponent } from "vue"

export default defineComponent({
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    isCollapse() {
      return !this.sidebar.opened
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === "mobile"
      }
    }
  },
  watch: {
    isCollapse(v) {
      // console.log(v)
    }
  }
})
</script>
<script setup>
import SidebarItem from "./SidebarItem.vue"
// import { computed } from "vue"
import { useRoute } from "vue-router"
import { routes } from "@/router"
import variables from "styles/variables.module.scss"

const activeMenu = computed(() => {
  const route = useRoute()
  const { meta, path } = route
  if (meta.activeMenu) {
    return meta.activeMenu
  }
  return path
})
// console.log(this)
// console.log(this.sidebar)
// const isCollapse = computed(() => !)
</script>
<style scoped lang="scss">

// personaliztion el-menu--collapse
// .app-wrapper::v-deep {
//   .el-menu--collapse {
//     a {
//       span {
//         display: none;
//       }
//       .el-sub-menu__icon-arrow {
//         display: none;
//       }
//     }
//   }
// }
</style>


